<script setup>
import {ref, provide} from 'vue'
import Asides from "../components/Aside.vue";
import Headers from "../components/Header.vue";
import Mains from "../components/Main.vue";

//头部
//共享数据
//收缩大小
const aside_width = ref('300px')
provide('aside_width', aside_width)
//是否收缩
const isCollapse = ref(false)
provide('isCollapse', isCollapse)



</script>

<template>
  <div class="home">
    <el-container class="layout-container-demo" style="height: 100%;border-top: #ccc solid 2px;">
      <!--侧边栏-->
      <el-aside :width="aside_width">
        <Asides></Asides>
      </el-aside>

      <el-container>
        <!--头部-->
        <el-header style="text-align: right; font-size: 12px;height:100px">
          <Headers></Headers>
        </el-header>
        <!--内容-->
        <el-main>
          <Mains></Mains>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  border-right: #ccc solid 1px;

}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .el-header {
  position: relative;
  /*background-color: var(--el-color-primary-light-7);*/
  color: var(--el-text-color-primary);
  border-bottom: #999 solid 1px;
}

</style>
